 import React,{ Component } from 'react';
 import { HomeNavStyle,HomeNavUlStyle,HomeNavLiStyle } from './HomeNavStyle';
 import { NavLink } from 'react-router-dom'
 import BScroll from 'better-scroll'


 const Item = ( props ) => {
    return (
    <HomeNavLiStyle>  
      <NavLink to={props.path} activeclass="active"> {props.name} </NavLink>
    </HomeNavLiStyle>)
 }

 class HomeNav extends Component{

    constructor () {
      super()
      this.state = {
        navList:[
          {
            id:1,
            name:'首页',
            path:'/home/index'
          },
          {
            id:2,
            name:'极速免税店',
            path:'/home/global'
          },
          {
            id:3,
            name:'母婴',
            path:'/home/monandbaby'
          },
          {
            id:4,
            name:'轻奢',
            path:'/home/luxury'
          },
          {
            id:5,
            name:'名品特卖',
            path:'/home/pop'
          },
        ]
      }
    }

    renderItem = () => {
      return this.state.navList.map( item => {
        return <Item {...item} key={ item.id }/>
      } )
    }
    // 导航条 X 轴滚动
    componentDidMount () {
      this.scroll = new BScroll( this.box,{
        scrollX:true,
        click:true
      })
      
    }


     render () {
         return (
         <HomeNavStyle ref={ el => this.box =el }>
           <HomeNavUlStyle>
            { this.renderItem() }
           </HomeNavUlStyle>
         </HomeNavStyle>
         )
     }
 }

 export default HomeNav